<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		
		form{
			width:320px;
			height:30px;
			position: relative;
		}
        
        form span{
        	position: absolute;
        	top:0;
        	font-size: 12px;
        	line-height: 30px;
        	right:40px;
        }

        form span a{
        	text-decoration: none;
        }


        form button,form input{
        	outline: none;
        	border:none;
        	width:30px;
        	height:30px;
        }

        form button{
        	position: absolute;
        	top:0;
        	right:0;
        	background: #666 url('https://res8.vmallres.com/20190107/images/echannel/icon/icon-header.png?20170620') no-repeat 0 -20px;
        	text-indent: -99999px;
        	border-radius: 50%;
        }

        form input{
        	width:100%;
        	background: #f5f5f5;
        	border-radius: 15px;
        	text-indent: 1em;

        }


		form input:focus + span{
			display: none;
		}



	</style>
</head>
<body>
	<form action="">
		<input type="text">
		<span>
			<a href="#">mate20</a>
			<a href="#">p20plus</a>
		</span>
		<button type="button">搜索</button>
	</form>
</body>
</html>